<template>
	<!-- v-text和v-html -->
	<h2>根组件</h2>
	<!-- v-text基本等同于{{ }} -->
	<!-- 纯文本输入，即使存在HTML文本 -->
	<p v-text="text + 'abc'"></p>
	<!-- 会解析数据中的标签文本，渲染成html标签 -->
	<p v-html="text + 'abc'"></p>
	
	<!-- v-bind -->
	<div v-bind:title="title">属性绑定指令</div>
	<div :title="title">属性绑定指令</div>
	
	<!-- v-on -->
	<button v-on:click="fun">事件绑定指令</button>
	<br />
	<button @click="fun">事件绑定指令</button>
</template>

<script setup>
import { ref } from 'vue'
const text = ref("<a href='https://www.baidu.com'>百度首页</a>")
const title = ref('123')

const fun = () => { alert('v-on') }
</script>

<style scoped>
	
</style>